<!DOCTYPE html>
<html lang="en">

  <!-- Do not use this HTML file as a start -->
  <!-- Always create your own HTML file and follow steps in basic usage section of documentation -->

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    

    <title> Gallery with Fade and Vertical Thumbs | RoyalSlider Example</title>

    <meta content="Touch-enabled image gallery and content slider plugin, that focuses on providing great user experience on every desktop and mobile device." name="description">
    <meta name="keywords" content="content slider, gallery, plugin, jquery, banner rotator">
    <meta name="viewport" content="width = device-width, initial-scale = 1.0" />
    <meta name="author" content="Dmitry Semenov">

    <!-- slider JS files -->
    
    <script class="rs-file" src="../assets/royalslider/jquery-1.8.3.min.js"></script>
    <script class="rs-file" src="../assets/royalslider/jquery.royalslider.min.js"></script>
    <link class="rs-file" href="../assets/royalslider/royalslider.css" rel="stylesheet">
    
    

    
    <!-- syntax highlighter -->
    <script src="../assets/preview-assets/js/highlight.pack.js"></script>
    <script src="../assets/preview-assets/js/jquery-ui-1.8.22.custom.min.js"></script>
    <script> hljs.initHighlightingOnLoad();</script>


    

    <!-- preview-related stylesheets -->
    <link href="../assets/preview-assets/css/reset.css" rel="stylesheet">
    <link href="../assets/preview-assets/css/smoothness/jquery-ui-1.8.22.custom.css" rel="stylesheet">
    <link href="../assets/preview-assets/css/github.css" rel="stylesheet">

    <!-- slider stylesheets -->
    
     
        <link class="rs-file" href="../assets/royalslider/skins/universal/rs-universal.css" rel="stylesheet">
     
    

    
    <!-- slider css -->
    <style>
      #gallery-2 {
  width: 100%;
  background: #151515;
  -webkit-user-select: none;
  -moz-user-select: none;  
  user-select: none;
}

    </style>
    
    <style>
      #page-navigation { display: none; }
    </style>
  </head>
  <body >
  <header  id="main-header" class="clearfix">  
    <div  class="page wrapper"> 
       <div class="col span_6">
         <a id="logo" href="#">Royal&thinsp;Slider</a>
         <nav>
            <a href="http://dimsemenov.com/plugins/royal-slider/documentation/?s=dp">Documentation</a>
            <a href="http://dimsemenov.com/plugins/royal-slider/build/?s=dp">Build Tool</a>
            <a href="http://dimsemenov.com/private/forum.php">Support Forum</a>
            <a href="http://help.dimsemenov.com/discussions/suggestions">Request feature</a>
         </nav>
       </div>
    </div>
  </header>
  <div  class="page wrapper">    
    <div class="row clearfix">
      <div id="page-navigation" class="col span_6"> 
            
          <div class="left page-nav-item"> 
                  <a href="../slider-in-laptop/" title="Previous Example: 
  Slider in Laptop">← Slider in Laptop</a> 
          </div> 
           
           
          <div class="right page-nav-item"> 
          
                  <a href="../simple-vertical/" title="Next Example: 
  Simple Vertical Slider">Simple Vertical Slider → </a> 
          
          </div> 
           
      </div> 
    </div>

    <!-- slider code start -->
      <div class="row clearfix">
  <div class="fwImage col span_4">
<div id="gallery-2" class="royalSlider rsUni">
  <a class="rsImg" data-rsBigImg="../img/paintings/1.jpg" href="../img/paintings/700x500/1.jpg" data-rsw="400" data-rsh="500">Vincent van Gogh - Still Life: Vase with Twelve Sunflowers<img width="96" height="72" class="rsTmb" src="../img/paintings/t/1.jpg" /></a>
  <a class="rsImg" data-rsBigImg="../img/paintings/2.jpg" href="../img/paintings/700x500/2.jpg"  data-rsw="632" data-rsh="500">Vincent van Gogh - The Starry Night<img width="96" height="72" class="rsTmb" src="../img/paintings/t/2.jpg" /></a>

  <a class="rsImg" data-rsBigImg="../img/paintings/3.jpg" href="../img/paintings/700x500/3.jpg"  data-rsw="336" data-rsh="500">Leonardo da Vinci - Mona Lisa<img width="96" height="72" class="rsTmb" src="../img/paintings/t/3.jpg" /></a>
  <a class="rsImg" data-rsBigImg="../img/paintings/4.jpg" href="../img/paintings/700x500/4.jpg"  data-rsw="417" data-rsh="500">Grant DeVolson Wood - American Gothic<img width="96" height="72" class="rsTmb" src="../img/paintings/t/4.jpg" /></a>
  <a class="rsImg" data-rsBigImg="../img/paintings/5.jpg" href="../img/paintings/700x500/5.jpg"  data-rsw="601" data-rsh="500">Rembrandt - The Night Watch<img width="96" height="72" class="rsTmb" src="../img/paintings/t/5.jpg" /></a>
  <a class="rsImg" data-rsBigImg="../img/paintings/6.jpg" href="../img/paintings/700x500/6.jpg" data-rsw="350" data-rsh="500">Johannes Vermeer - Girl with a Pearl Earring<img width="96" height="72" class="rsTmb" src="../img/paintings/t/6.jpg" /></a>
  <a class="rsImg" data-rsBigImg="../img/paintings/7.jpg" href="../img/paintings/700x500/7.jpg"  data-rsw="596" data-rsh="500">Paul Cezanne - Card Players<img width="96" height="72" class="rsTmb" src="../img/paintings/t/7.jpg" /></a>
  <a class="rsImg" data-rsBigImg="../img/paintings/8.jpg" href="../img/paintings/700x500/8.jpg"  data-rsw="700" data-rsh="500">Ilya Repin - Reply of the Zaporozhian Cossacks<img width="96" height="72" class="rsTmb" src="../img/paintings/t/8.jpg" /></a>
  <a class="rsImg" data-rsBigImg="../img/paintings/9.jpg" href="../img/paintings/700x500/9.jpg"  data-rsw="470" data-rsh="500">Ivan Aivazovsky - Chesmabattle<img width="96" height="72" class="rsTmb" src="../img/paintings/t/9.jpg" /></a>
  <a class="rsImg" data-rsBigImg="../img/paintings/10.jpg" href="../img/paintings/700x500/10.jpg" data-rsw="500" data-rsh="500">Gustav Klimt - The Kiss<img width="96" height="72" class="rsTmb" src="../img/paintings/t/10.jpg" /></a>
   <a class="rsImg" data-rsBigImg="../img/paintings/11.jpg" href="../img/paintings/700x500/11.jpg" data-rsw="700" data-rsh="475">Ivan Shishkin - Morning in a Pine Forest<img width="96" height="72" class="rsTmb" src="../img/paintings/t/11.jpg" /></a>
</div>
  </div>
  <div class="col span_2 example-info">
    <h1>Gallery with Fade and Vertical Thumbs</h1>
    <p>Size of thumbnails can be easily changed dynamically via CSS media queries (as is done in this demo).</p>
    <p>Image scaling option is set to "Fit if smaller". That means that image will fit inside slider area keeping proportions only if it's larger. There are also "fill the area", "fit", and "none" image scaling options.</p>
  </div>
</div>


  <!-- You don't need this part of code -->
  <div class="row clearfix">
    <h2>Markup for current slider</h2>
    <p style="max-width: 500px;">For better understanding please don't use this HTML file as a starter file, create your own and follow steps in <a href="http://dimsemenov.com/plugin/royal-slider/documentation/">basic usage section</a> of documentation </p>
    <div class="tabs col span_6">
    <ul>
        <li><a href="#js">JavaScript</a></li>
        <li><a href="#css">CSS</a></li>
        <li><a href="#html">HTML</a></li>
        <li><a href="#files">Files to include</a></li>
    </ul>
    <div id="js"><p>Slider JavaScript initialization code.</p><pre><code></code></pre></div>
    <div id="css"><p>Additional CSS styles for current slider.</p><pre><code>#gallery-2 {
  width: 100%;
  background: #151515;
  -webkit-user-select: none;
  -moz-user-select: none;  
  user-select: none;
}
</code></pre></div>
    <div id="html"><p>HTML markup of slider.</p><pre id="html-code"><code></code></pre></div>
    <div id="files"><p>You should include: jQuery, main slider JavaScript file, main slider CSS file, skin CSS file. <br/>It's recommended to get jquery.royalslider.min.js from build tool. Feel free to combine files in one.<br/>Make sure that paths match locations of files.</p><pre><code></code></pre></div>
    </div>
  </div>
  <script>
    jQuery(document).ready(function($) {
      // DO NOT INCLUDE THIS CODE IN YOUR BUILD, it's for tabs on this page
        var code = $('#html-code code');
        if(code.is(':empty')) {
          var rsCode = $('.royalSlider-preview');
          if(!rsCode.length) {
              rsCode = $('.royalSlider');
          }
          rsCode = rsCode.clone().removeClass('royalSlider-preview').wrap('<div></div>').parent().html();
          rsCode = htmlencode(rsCode);
          code.html(rsCode);
        }
        $('#js code').html( htmlencode($('#addJS').html()) );

        var filesHTML = '';
        $('.rs-file').each(function() {
          var item = $(this).removeAttr('class');
          if(item.is('script')) {
            filesHTML += '<script src="' + item.attr('src') + '" />';
          } else {
            filesHTML += $('<div>').append( $(this).clone().removeAttr('class') ).html();
          }
          filesHTML += "\n";
        });
        $('#files code').html( htmlencode( filesHTML ) );
        $( ".tabs" ).tabs();
    });
    function htmlencode(str) {
      if(str) {
         return str.replace(/[&<>"']/g, function($0) {
            return "&" + {"&":"amp", "<":"lt", ">":"gt", '"':"quot", "'":"#39"}[$0] + ";";
        });
      }
    }   
  </script>
  <div class="row clearfix">
    <h2>List of Starter Templates</h2>
  <ul id="templates-list" class="col span_6">
  
  <li><a href="../content-slider/"><img width="341" height="250" src="../img/previews/content-slider.jpg" /><h3>HTML Content Slider</h3></a></li>
  
  <li><a href="../video-gallery/"><img width="341" height="250" src="../img/previews/video-gallery.jpg" /><h3>Video Gallery</h3></a></li>
  
  <li><a href="../gallery/"><img width="341" height="250" src="../img/previews/gallery.jpg" /><h3>Image Gallery with Fullscreen Option</h3></a></li>
  
  <li><a href="../visible-nearby/"><img width="341" height="250" src="../img/previews/visible-nearby.jpg" /><h3>Gallery with Visible Nearby Images</h3></a></li>
  
  <li><a href="../animated-blocks/"><img width="341" height="250" src="../img/previews/animated-blocks.jpg" /><h3>Slider with Animated Blocks</h3></a></li>
  
  <li><a href="../full-width/"><img width="341" height="250" src="../img/previews/fullwidth.jpg" /><h3>Full Width Slider</h3></a></li>
  
  <li><a href="../slider-in-lightbox/"><img width="341" height="250" src="../img/previews/lightbox.jpg" /><h3>Slider in Lightbox</h3></a></li>
  
  <li><a href="../simple-vertical/"><img width="341" height="250" src="../img/previews/simple-vertical.jpg" /><h3>Simple Vertical Slider</h3></a></li>
  
  <li><a href="../gallery-vertical-fade/"><img width="341" height="250" src="../img/previews/gallery-fade.jpg" /><h3>Gallery with Fade and Vertical Thumbs</h3></a></li>
  
  <li><a href="../slider-in-laptop/"><img width="341" height="250" src="../img/previews/slider-in-laptop.jpg" /><h3>Slider in Laptop</h3></a></li>
  
  <li><a href="../gallery-with-deeplinking/"><img width="341" height="250" src="../img/previews/deeplinking.jpg" /><h3>Gallery with Deep Linking</h3></a></li>
  
  </ul>
</div>
  <footer class="row clearfix" id="main-footer">
    <div class="col span_6">
      <nav><a href="http://dimsemenov.com/subscribe.html?s=sb">Email Newsletter</a><a href="http://twitter.com/dimsemenov">Twitter</a><a href="mailto:diiiimaaaa@gmail.com?subject=RoyalSlider bug">Report Bug</a><a href="http://dimsemenov.com/plugins/royal-slider/support/">Contact support</a></nav>
      <p class="copy">© 2011-2012 <a href="http://dimsemenov.com">Dmitry Semenov</a></p>
    </div>
  </footer>
   <!-- tabs & footer end /// --> 
   
  
    <script id="addJS">jQuery(document).ready(function() {
  $('#gallery-2').royalSlider({
    fullscreen: {
      enabled: true,
      nativeFS: true
    },
    controlNavigation: 'thumbnails',
    thumbs: {
      orientation: 'vertical',
      paddingBottom: 4,
      appendSpan: true
    },
    transitionType:'fade',
    autoScaleSlider: true, 
    autoScaleSliderWidth: 960,     
    autoScaleSliderHeight: 600,
    loop: true,
    arrowsNav: false,
    keyboardNavEnabled: true

  });
});
</script>
  
  </div>
  </body>
</html>
